import { View, Input, Button, Text, Image } from '@tarojs/components'
import Taro, { useDidShow, useLoad, useReady } from '@tarojs/taro'
import { useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { OsButton } from 'ossaui'
import Mycomp from '../../components/Mycomp'
import { onAdd as addAction, asyncQuery } from '../../store/action'
import './index.scss'



export default function Index() {
  const todoList = useSelector(state => state.todoList)
  const dispatch = useDispatch()
  console.log(todoList, 'todo')
  // const [todoList, setTodoList] = useState([])
  const [value, setValue] = useState('')

  useLoad(() => {
    console.log('Page loaded.')
    dispatch(asyncQuery())
  })

  useReady(() => {
    console.log('ready')
  })

  useDidShow(() => {
    console.log('show')
  })

  const onAdd = () => {
    dispatch(addAction(value))
    setValue('')
  }

  const changeValue = (e) => {
    setValue(e.detail.value)
  }

  const onDelete = (index) => {
    dispatch({
      type: 'DELETE',
      payload: {
        index,
      }
    })
  }

  const onEvent = (val) => {
    console.log('子组件执行了', val)
  }

  const getUserInfo = () => {
    Taro.getUserProfile({
      desc: '用于用户信息展示',
      success(res) {
        console.log(res)
      }
    })
  }

  const onChooseAvatar = (e) => {
    const { avatarUrl } = e.detail
    console.log(avatarUrl, 'avatarUrl')
  }

  const goDetail = () => {
    Taro.navigateTo({
      url: '/pages/detail/detail?id=1&name=tom'
    })
  }

  const getLocation = () => {
    // console.log('获取位置')
    // Taro.getLocation({
    //   type: 'wgs84'
    // }).then(res => {
    //   console.log(res)
    // })
    Taro.authorize({
      scope: "scope.userLocation",
      success(res) {
        console.log(res)
      }
    })
  }

  return (
    <View className='index'>
      <View className='box'>色块</View>
      <Button onLocation={getLocation}>获取位置</Button>
      <Button onClick={getUserInfo}>获取信息</Button>
      <Button class='avatar-wrapper' open-type='chooseAvatar' onChooseavatar={onChooseAvatar}>
        <Image class='avatar' src='https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'></Image>
      </Button>
      <Input type='nickname' class='weui-input' placeholder='请输入昵称' />
      <Mycomp value={value} onEvent={onEvent} >
        <Text>父组件文本</Text>
      </Mycomp>
      <Input
        value={value}
        onInput={changeValue}
      />
      <Button
        onClick={onAdd}
      >添加</Button>
      {
        todoList.map((item, index) => {
          return (
            <View>
              <Text>{item}</Text>
              <Button onClick={() => {
                onDelete(index)
              }}
              >删除</Button>
            </View>
          )
        })
      }
      <Button onClick={goDetail}>跳转</Button>
      <OsButton type='primary' >
        按钮
      </OsButton>

    </View>
  )
}




